<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
	<script src="${pageContext.request.contextPath}/static/Highcharts-5.0.14/code/highcharts.js"></script>
	<script src="${pageContext.request.contextPath}/static/Highcharts-5.0.14/code/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	<!-- 貌似Highcharts的js文件有些与easyui的冲突，需要删掉某些没用的，否则界面停滞不动 -->
</head>
<body>
<div id="container" style="min-width:400px;height:320px"></div>
	
	<table id="dg" class="easyui-datagrid" title="实时监控数据表格" style="width:700px;height:100%"
			data-options="singleSelect:true,collapsible:false" fitColumns="true" fit="true" >
			<!-- data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json'"本地加载方式1,从文件中读取 -->
		<thead>
			<tr>
				<th data-options="field:'dataType',width:80,align:'center'">数据类型</th>
				<th data-options="field:'currentTime',width:100,align:'center'">当前时间</th>
				<th data-options="field:'filesNumber',formatter:filesNumber,width:80,align:'center'">文件个数</th>
			</tr>
		</thead>
	</table>
	<script>
	function filesNumber(val,row){
		return row.filesNumber+'个';
		        };
		        
	var fACCH_CURRENT_QUANTITY;
	var frequencySpectrum_CURRENT_QUANTITY;
	var sACCH_CURRENT_QUANTITY;
	var sDCCH_CURRENT_QUANTITY;
	var tCH_CURRENT_QUANTITY;
	
	function checkData(){
		var url = "${pageContext.request.contextPath}/realTimeMonitoring/getCurrentQuantity.do";  
		var data = {type:1};
		$.ajax({   type : "get",   async : false, //同步请求   
			url : url,   
			data : data,   
			timeout:1000,   
			success:function(dates){
			var dataObj=eval("("+dates+")");
			
			fACCH_CURRENT_QUANTITY = dataObj.FACCH_CURRENT_QUANTITY;
			frequencySpectrum_CURRENT_QUANTITY = dataObj.FrequencySpectrum_CURRENT_QUANTITY;
			sACCH_CURRENT_QUANTITY = dataObj.SACCH_CURRENT_QUANTITY;
			sDCCH_CURRENT_QUANTITY = dataObj.SDCCH_CURRENT_QUANTITY;
			tCH_CURRENT_QUANTITY = dataObj.TCH_CURRENT_QUANTITY;
					
					
			},   
			error: function() {
				alert("获取数据失败，请稍后再试！");
			}  
			});   
	} 
	
	
	Highcharts.setOptions({
	    global: {
	        useUTC: false
	    }
	});
		
	function activeLastPointToolip(chart) {
		//设置最后新增的一个数据进行数据提示框显示
	    var points = chart.series[0].points;
	    chart.tooltip.refresh(points[points.length -1]);
	    
	}
	Highcharts.setOptions({
	    // 所有语言文字相关配置都设置在 lang 里
	    lang: {
	        resetZoom: '重置',
	        resetZoomTitle: '重置缩放比例'
	    }
	});

	$('#container').highcharts({
		credits:{
		     enabled:false // 禁用版权信息
		},
	    chart: {
	        type: 'spline',//修改为bar可以显示柱形图
	        zoomType: 'xy',
	        animation: Highcharts.svg, // don't animate in old IE
	        marginRight: 10,
	        events: {
	            load: function () {
	                // set up the updating of the chart each second
	                var series_frequencySpectrum = this.series[0];
	                var series_sACCH_CURRENT_QUANTITY = this.series[1];
	                var series_sDCCH_CURRENT_QUANTITY = this.series[2];
	                var series_fACCH_CURRENT_QUANTITY = this.series[3];
	                var series_tCH_CURRENT_QUANTITY = this.series[4];
	                
	                var chart = this;
	                setInterval(function () {
	                	checkData();
	                	
	                	var currentTime = new Date();
	                    var x = (currentTime).getTime(); // current time
	                    
	                    var y_frequencySpectrum_CURRENT_QUANTITY = frequencySpectrum_CURRENT_QUANTITY;
	                    var y_sACCH_CURRENT_QUANTITY = sACCH_CURRENT_QUANTITY;
	                    var y_sDCCH_CURRENT_QUANTITY = sDCCH_CURRENT_QUANTITY;
	                    var y_fACCH_CURRENT_QUANTITY = fACCH_CURRENT_QUANTITY;
	                    var y_tCH_CURRENT_QUANTITY = tCH_CURRENT_QUANTITY;
	                    
	                    var currentTimeStr = currentTime.getFullYear()+'-'+(currentTime.getMonth()+1)+'-'+   
	                    currentTime.getDate()+'    '+ currentTime.getHours()+'：'+currentTime.getMinutes()+'：'+currentTime.getSeconds();
	                    //通过HTML解释的方式生成表数据
	                    //document.getElementById("tbl").innerHTML="<table cellspacing=\"5\"><tr><th>数据类型</th><th>当前时间</th><th>文件个数</th></tr><tr align=\"center\"><td>频谱数据</td><td>"+currentTimeStr+"</td><td>"+y_frequencySpectrum_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>SACCH</td><td>"+currentTimeStr+"</td><td>"+y_sACCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>SDCCH</td><td>"+currentTimeStr+"</td><td>"+y_sDCCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>FACCH</td><td>"+currentTimeStr+"</td><td>"+y_fACCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>TCH</td><td>"+currentTimeStr+"</td><td>"+y_tCH_CURRENT_QUANTITY+"</td></tr></table>";
	                    
	                    
	                      var obj = {"total":100,"rows":[
	                    	{"dataType":"频谱","currentTime":currentTimeStr,"filesNumber":y_frequencySpectrum_CURRENT_QUANTITY},
	                    	{"dataType":"SACCH","currentTime":currentTimeStr,"filesNumber":y_sACCH_CURRENT_QUANTITY},
	                    	{"dataType":"SDCCH","currentTime":currentTimeStr,"filesNumber":y_sDCCH_CURRENT_QUANTITY},
	                    	{"dataType":"FACCH","currentTime":currentTimeStr,"filesNumber":y_fACCH_CURRENT_QUANTITY},
	                    	{"dataType":"TCH","currentTime":currentTimeStr,"filesNumber":y_tCH_CURRENT_QUANTITY}
	                    	]};   
	                    $("#dg").datagrid("loadData",obj);  
	                    
	                    	
	                    
	                    series_frequencySpectrum.addPoint([x,y_frequencySpectrum_CURRENT_QUANTITY], true, true);
	                    series_sACCH_CURRENT_QUANTITY.addPoint([x,y_sACCH_CURRENT_QUANTITY], true, true);
	                    series_sDCCH_CURRENT_QUANTITY.addPoint([x,y_sDCCH_CURRENT_QUANTITY], true, true);
	                    series_fACCH_CURRENT_QUANTITY.addPoint([x,y_fACCH_CURRENT_QUANTITY], true, true);
	                    series_tCH_CURRENT_QUANTITY.addPoint([x,y_tCH_CURRENT_QUANTITY], true, true);
	                    
	                    activeLastPointToolip(chart)
	                }, 1000);
	            }
	        }
	    },
	    title: {
	        text: '实时入库监测',
	        style:{
	        	color:"#000",
	            fontWeight:"bold"
	        }
	    },
	    xAxis: {
	    	title: {
	            text: '时间'
	        },
	        type: 'datetime',
	        tickPixelInterval: 150
	    },
	    yAxis: {
	        title: {
	            text: '入库文件数量（个）'
	        },
	        plotLines: [{
	            value: 0,
	            width: 1,
	            color: '#808080'
	        }]
	    },
	    tooltip: {
	    	/* enabled : false, */
	        formatter: function () {
	            return '<b>' + this.series.name + '</b><br/>' +
	                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
	                Highcharts.numberFormat(this.y, 0);
	        }
	    },
	    legend: {
	    	//设置打开图例
	        enabled: true
	    },
	    exporting: {
	        enabled: true
	    },
	    series: [{
	        name: '频谱数据',
	        data: (function () {
	            // generate an array of random data
	            var data = [],
	                time = (new Date()).getTime(),
	                i;
	            for (i = -19; i <= 0; i += 1) {
	                data.push({
	                    x: time + i * 1000,
	                    y: Math.random()
	                });
	            }
	            return data;
	        }())
	    },{
	        name: 'SACCH数据',
	        data: (function () {
	            // generate an array of random data
	            var data = [],
	                time = (new Date()).getTime(),
	                i;
	            for (i = -19; i <= 0; i += 1) {
	                data.push({
	                    x: time + i * 1000,
	                    y: 0
	                });
	            }
	            return data;
	        }())
	    },{
	        name: 'SDCCH数据',
	        data: (function () {
	            // generate an array of random data
	            var data = [],
	                time = (new Date()).getTime(),
	                i;
	            for (i = -19; i <= 0; i += 1) {
	                data.push({
	                    x: time + i * 1000,
	                    y: 0
	                });
	            }
	            return data;
	        }())
	    },{
	        name: 'FACCH数据',
	        data: (function () {
	            // generate an array of random data
	            var data = [],
	                time = (new Date()).getTime(),
	                i;
	            for (i = -19; i <= 0; i += 1) {
	                data.push({
	                    x: time + i * 1000,
	                    y: 0
	                });
	            }
	            return data;
	        }())
	    },{
	        name: 'TCH数据',
	        data: (function () {
	            // generate an array of random data
	            var data = [],
	                time = (new Date()).getTime(),
	                i;
	            for (i = -19; i <= 0; i += 1) {
	                data.push({
	                    x: time + i * 1000,
	                    y: 0
	                });
	            }
	            return data;
	        }())
	    }
	    
	    ]
	}, function(c) {
	    activeLastPointToolip(c)
	});
</script>
</body>
</html>